<template>
  <section class="main-body" v-if="isShow">
    <Tarbar @barClick="barClick" @loadModels="loadModels"></Tarbar>
    <bottom @itemClick="itemClick"></bottom>
    <ContentComponent>
      <template #default>
<!--        如果后续卡顿可以可以考虑keep-alive-->
        <component :is="dynamicComponent"></component>
      </template>
    </ContentComponent>
  </section>
</template>

<script setup name="Home">
import Bottom from './bottom.vue'
import Tarbar from './tarbar.vue'
import ContentComponent from './content.vue'
import {defineAsyncComponent, getCurrentInstance, ref, shallowRef, watch} from "vue";
import {useFantasyStore} from "../../store";
import hooks from "../../hooks/index.js";

const { proxy } = getCurrentInstance();

const fantasy3DStore = useFantasyStore()
const isShow = ref(false)
// watch(() => fantasy3DStore.$state.modelStatus, (newValue, oldValue) => {
watch(() => fantasy3DStore.$state.mapStatus, (newValue, oldValue) => {

  if (newValue) {
    isShow.value = true
    proxy.$hooks.usePostMessage(
        {
          funcName: ['useMonitorLog'],
          property: [
            {
              isDevelopment: import.meta.env.MODE === 'development'
              // isDevelopment: false
            },
          ]
        }
    )
  }
});

const dynamicComponent = shallowRef('')

const barClick = (data) => {
  // console.log("选中的选项值", data)
  turnPage(data)
}

const itemClick = (data) => {
  // console.log("切换园区选中的第一个选项值", data)
  turnPage(data)
  const { property } = data
  proxy?.$hooks.usePostMessage(
      {
        funcName: ['useLoadTiles', 'useCameraRotate'],
        property: [
          {
            url: '/3dTiles/factory3/tileset.json',
            newPosition: true
          },
          {
            ...property
          }
        ]
      }
  )
}

const loadModels = (data) => {
  console.log("data", data)
  const { url, property, newPosition } = data

  proxy?.$hooks.usePostMessage(
      {
        funcName: ['useRemoveLoadTiles', 'useRemoveCameraRotate', 'useCameraRotate', 'useLoadTiles'],
        property: [
          {},
          {},
          {
            ...property
          },
          {
            url: url,
            newPosition: newPosition
          }
        ]
      }
  )
}

const modules = import.meta.glob('/src/views/modules/*.vue');
console.log("modules", modules)
const turnPage = (data) => {
  const componentPath = data.url;
  if (componentPath) {
    const asyncComponent = modules[`/src/views/modules/${componentPath.split('/').pop()}`];
    console.log("asyncComponent1", asyncComponent)
    if (asyncComponent) {
      dynamicComponent.value = defineAsyncComponent(asyncComponent);
    } else {
      console.error(`Component ${componentPath} not found`);
      dynamicComponent.value = null;
    }
  } else {
    dynamicComponent.value = null;
  }
}


</script>

<style scoped lang="scss">
.main-body {
  width: 100%;
  height: 100%;
}
</style>
